import React, {Component} from 'react';
import {StyleSheet, Text, View, TextInput, TouchableOpacity, Image, Platform} from 'react-native';

export default class extends Component {
    //初始值
    state = {
        keywords: ''
    };
    //输入搜索文本
    setKeywords = text => {
        this.setState({
            keywords: text.trim()
        });
    };

    //点击搜索
    search = () => {
        const {navigation} = this.props;
        const {keywords} = this.state;
        navigation.navigate('search', {keywords});
    };

    render() {
        const searchIcon = require('./img/search.png');
        const {bgColor} = this.props;
        return (
            <View style={[styles.container, {backgroundColor: bgColor}]}>
                <TouchableOpacity onPress={this.search} style={{flex: 1, height: 25}}>
                    <Text style={styles.input}>粘贴宝贝标题，先领券再购物</Text>
                </TouchableOpacity>
                <Image source={searchIcon} style={styles.icon}/>
                <TouchableOpacity onPress={this.search}>
                    <Text style={styles.button}>搜索</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: '100%',
        ...Platform.select({
            ios: {
                height: 64,
                paddingTop: 20
            },
            android: {
                height: 44
            }
        }),
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 30,
        paddingRight: 7,
        zIndex: 2
    },
    icon: {
        width: 14,
        height: 14,
        position: 'absolute',
        left: 40,
        ...Platform.select({
            ios: {
                top: 36
            },
            android: {
                height: 16
            }
        })
    },
    input: {
        flex: 1,
        height: 25,
        lineHeight: 25,
        borderRadius: 4,
        backgroundColor: '#fff',
        textAlign: 'center',
        borderColor: '#909090',
        fontSize: 12,
        padding: 0
    },
    button: {
        fontSize: 12,
        color: '#fff',
        width: 36,
        height: 25,
        lineHeight: 25,
        textAlign: 'center'
    }
});
